<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Redux 源码解析-简介 | Zero2key&#39;s Blog</title>
<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="shortcut icon" href="https://zero2key.gitee.io/favicon.ico">
<link rel="stylesheet" href="https://zero2key.gitee.io/styles/main.css">


  
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css" />
  

  


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />


  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://zero2key.gitee.io">
        <img src="https://zero2key.gitee.io/images/avatar.png" class="site-logo">
        <h1 class="site-title">Zero2key&#39;s Blog</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="/archives" class="site-nav">
            归档
          </a>
        
      
        
          <a href="/tags" class="site-nav">
            标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="site-description">
      
    </div>
    <div class="site-footer">
      Powered by <a href="https://github.com/getgridea/gridea" target="_blank" style="color:#fff;">Gridea</a> And <a style="display: inline-block;
    width: 80px;line-height: 12px;font-size: 12px;position: relative;" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank">&nbsp;<img style="height: 40px;position: absolute;left:0;top:-15px;" src=""></img></a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Redux 源码解析-简介</h2>
            <div class="post-date">2019-09-07</div>
            
            <div class="post-content">
              <h2 id="简介">简介</h2>
<p>Redux 是 JavaScript 状态容器，提供可预测化的状态管理。</p>
<h2 id="安装">安装</h2>
<pre><code class="language-bash">npm install redux --save
# or
yarn add redux
</code></pre>
<h2 id="概念">概念</h2>
<p>Redux 中的 state 是以一个对象的形式存储在一个单一的 store 中。唯一可以更改 state 的方法是 dispatch 一个 action，一个描述发生了什么的对象。为了响应一个 action 如何修改 state，需要编写 reducers。</p>
<pre><code class="language-js">import { createStore } from 'redux';

/**
 * 这是一个 reducer，形式为 (state, action) =&gt; state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =&gt;
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1
</code></pre>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://zero2key.gitee.io/tag/redux/" class="tag">
                    Redux
                  </a>
                
                  <a href="https://zero2key.gitee.io/tag/yuan-ma-jie-xi/" class="tag">
                    源码解析
                  </a>
                
              </div>
            
            

            
              
                <div id="gitalk-container" data-aos="fade-in"></div>
              

              
            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script type="application/javascript">

AOS.init();

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  
  
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script>

      var gitalk = new Gitalk({
        clientID: '077888762ae810c37005',
        clientSecret: 'c443e600f8e2687909ccd669db5353cd0839979a',
        repo: 'Zero2key',
        owner: 'Zero2key',
        admin: ['Zero2key'],
        id: location.pathname,      // Ensure uniqueness and length less than 50
        distractionFreeMode: false  // Facebook-like distraction free mode
      })

      gitalk.render('gitalk-container')

    </script>
  

  




  </body>
</html>
